<template>
  <div class="navigator-container">
    <!-- 导航栏 -->
    <el-header>
      <div>
        <!-- 导航栏 -->
        <div class="nav-header">
          <ul class="left-wrap">
            <li>
              <router-link to="/portal">首页</router-link>
            </li>
            <li v-show="!userInfo.userName">
              <router-link to="/login">清先登录</router-link>
            </li>
            <li v-show="!userInfo.userName">
              <router-link to="/login?action=register">免费注册</router-link>
            </li>

            <li>
              <router-link to="#">手机逛最优购</router-link>
            </li>
            <li></li>
          </ul>
          <ul class="right-wrap">
            <li v-if="user">
              <el-dropdown
                placement="top"
                :show-timeout="0"
                :hide-timeout="500"
              >
                <span class="el-dropdown-link">
                  <span class="nickName">{{ userInfo.nickName }}</span>
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown" placement="top">
                  <el-dropdown-item><span>我的主页</span></el-dropdown-item>
                  <el-dropdown-item><span>修改密码</span> </el-dropdown-item>
                  <el-dropdown-item>
                    <span @click="logout">退出登录</span>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </li>
            <li v-else>
              <router-link to="/login">我的淘宝</router-link>
            </li>
            <li>
              <a @click="toCart" href="javascript:(void);">
                <i class="iconfont icon-gouwuche"></i>购物车
              </a>
            </li>
            <li>
              <router-link to="#">
                <i class="iconfont icon-dingdan"></i>我的订单
              </router-link>
            </li>
            <li>
              <router-link to="#">
                <i class="iconfont icon-shoucang"></i>我的收藏
              </router-link>
            </li>
            <li>
              <router-link to="#">
                <i class="iconfont icon-lishi"></i>浏览历史
              </router-link>
            </li>
          </ul>
        </div>
      </div>
    </el-header>
  </div>
</template>

<script>
import { mapState } from "vuex";
import { getUserInfo, logout } from "@/api/user";

import {
  getItem,
  removeItem,
  removeItemFromSession,
  setItemFromSession,
} from "@/utils/storage";

export default {
  name: "NavigatorIndex",
  components: {},
  props: {},
  data() {
    return {
      userInfo: {}, // 用户信息
    };
  },
  created() {
    // 用户登录了才发送请求获取用户数据
    if (this.user) {
      this.loadUserInfo();
      // 用户勾选自动登录后，会将token保存到localStorage中，下次打开页面会自动登录，但sessionStorage生命周期为一个会话
      // 所以用户自动登录成功后将token也保存到sessionStorage中一份
      this.saveToken();
    }
  },
  mounted() {},
  methods: {
    // 将localStorage中的token保存在sessionStorage中
    saveToken() {
      const token = getItem("token");
      if (token) {
        setItemFromSession("token", token);
      }
    },
    // 获取用户信息
    async loadUserInfo() {
      try {
        const { data } = await getUserInfo();
        this.userInfo = data.data;
        this.$emit("returnUserInfo", this.userInfo);
      } catch (err) {
        console.log(err);
        this.$message.error("用户信息获取失败");
      }
    },
    // 退出登录
    async logout() {
      try {
        const { data } = await logout();
        if (String(data.code) === "200") {
          this.$message.success("退出成功");
          this.userInfo = {};
          // 清除sessionStorage中的token
          removeItemFromSession("token");
          // 清除localStorage中的token
          removeItem("token");
          // 刷新页面，从而刷新vuex中的数据
          window.location.reload();
        }
      } catch (err) {
        this.$message.error("退出失败，请稍后重试");
      }
    },
    toCart() {
      if (!this.user) {
        return this.$router.push("/login");
      }
      this.$router.push("/cart");
    },
  },
  computed: {
    ...mapState(["user"]),
  },
  watch: {},
};
</script>

<style scoped lang="less">
/* 头部 */
:deep(.el-header) {
  // min-width: 1573px;
  min-width: 1190px;
  background-color: #f5f5f5;
  height: 35px !important;
  line-height: 35px;
  font: 13px/1.5 Microsoft YaHei, Heiti SC, tahoma, arial, Hiragino Sans GB,
    "\5B8B\4F53", sans-serif;
  color: #6c6c6c;

  /* 头部导航 */
  .nav-header {
    display: flex;
    justify-content: space-around;
    height: 100%;

    /* 整体设置li标签样式 */
    li {
      padding: 0 8px;
      line-height: 35px;
      height: 100%;

      a {
        color: #6c6c6c;
      }

      a:hover {
        color: #ff4746;
      }
    }

    /* 左边导航 */
    .left-wrap {
      height: 100%;

      li {
        float: left;
      }
    }

    /* 右边导航 */
    .right-wrap {
      height: 100%;

      .el-dropdown-link {
        .nickName:hover {
          cursor: default;
        }
      }

      li {
        float: left;

        /* 设置字体图标与右边文字距离 */
        .iconfont {
          margin-right: 3px;
        }

        /* 设置购物车字体图标颜色 */
        .icon-gouwuche {
          color: #ff4746;
        }

        span.logout:hover {
          color: #ff4746;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
